<template>
	<view>
		<uni-section title="基础信息" type="line" style="color: #409EFF;"></uni-section>
		<uni-list style="width:95%">
			<uni-list-item title="申请人" />
			<uni-list-item :thumb="reim_data.dry_apply_avatar" thumbSize="lg" :rightText="reim_data.dry_apply_note" />
			<uni-list-item title="申请时间" :rightText="reim_data.dry_add_time" />
			<uni-list-item title="主题" :rightText="reim_data.dry_title" />
			<uni-list-item title="费用" :rightText="reim_data.dry_cost" />
		</uni-list>
		<uni-section title="详细信息" type="line" style="color: #409EFF;"></uni-section>
		<uni-list style="width:95%;margin-bottom: 50rpx;" >
			<uni-list-item title="发票或收据" :rightText="'共' + imgNum + '张'" />
			<uni-file-picker id="img-box"
			title="照片最多显示3张" 
			v-model="bills"
			:image-styles="imgStyle"
			return-type="array"
			:del-icon="false"
			:disabled="true"
			mode="grid"/>
			<uni-list-item title="所在团队" :rightText="reim_data.dry_team_name" />
			<uni-list-item title="费用说明"/>
			<text style="font-size: 14px; color: #3b4144;margin-left: 30rpx;">{{ reim_data.dry_note }}</text>
		</uni-list>
		<uni-section title="审核" type="line" style="color: #409EFF;"></uni-section>
		<uni-list>
			<uni-list-item v-if="reim_data.dry_audit_step == 0" rightText="审核中......"/>
			<uni-list-item v-if="reim_data.dry_audit_step == 1" :thumb="reim_data.dry_audit_avatar1" thumbSize="lg" :title="reim_data.dry_apply_note1" rightText="已通过" />
			<uni-list-item v-if="reim_data.dry_audit_step == 2" :thumb="reim_data.dry_audit_avatar2" thumbSize="lg" :title="reim_data.dry_apply_note2" rightText="已通过" />
			<uni-list-item v-if="reim_data.dry_audit_step == 3" :thumb="reim_data.dry_audit_avatar3" thumbSize="lg" :title="reim_data.dry_apply_note3" rightText="已通过" />
			<uni-list-item v-if="reim_data.dry_audit_step == 4" :thumb="reim_data.dry_audit_avatar4" thumbSize="lg" :title="reim_data.dry_apply_note4" rightText="已通过" />
			<uni-list-item v-if="reim_data.dry_audit_step == reim_data.dry_team_step" rightText="审核流程已完成" />
		</uni-list>
		<view style="text-align: center;" v-if="(team_data.dry_user == user.id && reim_data.dry_audit_step < reim_data.dry_team_step) || (employee.dry_is_audit == 1 && employee.dry_audit_step == (Number(reim_data.dry_audit_step) + 1))">
			<button type="default" size="mini" style="background-color: #007AFF;color: #fff;" @click="audit('agree')">同意</button>
			<button type="warn" size="mini" style="color: #fff;margin-right: 0;" @click="audit('refuse')">不同意</button>
		</view>
		<uni-section title="核销" type="line" style="color: #409EFF;"></uni-section>
		<uni-list v-if="reim_data.dry_reim_status == 1">
			<uni-list-item :title="reim_data.dry_reim_verify_note" :thumb="reim_data.dry_reim_verify_avatar" thumbSize="lg" rightText="已核销" />
			<uni-file-picker id="img-box"
			title="转账凭证" 
			v-value="oss_domain + reim_data.dry_reim_certify_ext.dry_object"
			:image-styles="imgStyle"
			return-type="object"
			:del-icon="false"
			:disabled="true"
			mode="grid"/>
		</uni-list>
		<view style="text-align: center; margin: 50rpx auto;" v-if="(team_data.dry_user == user.id && reim_data.dry_reim_status == 0) || (reim_data.dry_audit_step == reim_data.dry_team_step && team_data.dry_reim_verify == user.id)">
			<button type="default" size="mini" style="background-color: #007AFF;color: #fff; margin-right: 0;" @click="verify">核销</button>
		</view>
		<xy-dialog
		title="上传转账凭证图片" 
		:show.sync="showDialog"
		@cancelButton="clickCancel"
		@confirmButton="clickConfirm">
			<view style="padding: 0 30rpx 30rpx;">
				<uni-forms>
					<uni-forms-item label-align="right" label="图片:">
						<robby-image-upload v-model="salary.imageList"
						@delete="deleteImage" 
						limit="1"
						@add="addImage"></robby-image-upload>
					</uni-forms-item>
				</uni-forms>
				<button id="submit-button" type="default" :plain="true" @click="submit"></button>
			</view>
		</xy-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oss_domain: '',
				reim_data: [],
				team_data: [],
				user: [],
				employee: [],
				showDialog: false,
				imageList: [],
				fileList: [],
				images: [],
				delId: [],
				fileIds: [],
				bills: [],
				salary: {
					id: '',
					imageList: [],
					dry_reim_certify: 0
				},
				imgNum: 0,
				isEdit: false,
				isClickUpload: false,
				imgStyle: {
					"height": 100,   // 边框高度
					"width": 100,    // 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#eee",     // 边框颜色
						"width":"1px",      // 边框宽度
						"style":"solid",    // 边框样式
						// "radius":"50%"      // 边框圆角，支持百分比
					}
				}
			}
		},
		onLoad(){
			this.oss_domain = this.$dry.get("oss_domain");
			this.user = this.$dry.get("user");
			this.reim_data = this.$dry.get("reim_data");
		},
		onShow(){
			this.getEmployee();
			this.getTeam();
		},
		methods: {
			addImage(e){
				this.imageList = this.imageList.concat(e.paths);
				this.fileList = this.fileList.concat(e.files);
			},
			deleteImage(e){
				this.images.forEach(i => {
					if(i.url == e.currentImage){
						this.delId.push(i.id);
					}
				})
				for(let i = 0; i < this.imageList.length; i++){
					if(e.currentImage == this.imageList[i]){
						this.imageList.splice(i,1);
						i--;
					}
				}
				for(let j = 0; j < this.fileList.length; j++){
					if(e.currentImage == this.fileList[j].path){
						this.fileList.splice(j,1);
						j--;
					}
				}
			},
			getEmployee(){
				var token = this.$dry.getToken();
				if(token){
					var data = [];
					data['dry_team'] = this.reim_data.dry_team;
					data['dry_employee'] = this.user.id;
				    data = this.$request.run("getEmployeeList",data,token);
				    uni.request({
				    	url: data[0].url,
				    	method: data[0].method,
				    	header: data[0].header,
				    	data: data[0].data,
				    	success: data => {
							this.employee = data.data.data.list;
						}
					})
				}
			},
			getTeam(){
				var token = this.$dry.getToken();
				if(token){
					var data = [];
					data['id'] = this.reim_data.dry_team;
				    data = this.$request.run("getTeamById",data,token);
				    uni.request({
				    	url: data[0].url,
				    	method: data[0].method,
				    	header: data[0].header,
				    	data: data[0].data,
				    	success: data => {
							this.team_data = data.data.data.list[0];
						}
					})
				}
			},
			getReimList(id){
				var token = this.$dry.getToken();
				if(token){
					var data = [];
					data['id'] = id;
				    data = this.$request.run("getReimbursementList",data,token);
				    uni.request({
				    	url: data[0].url,
				    	method: data[0].method,
				    	header: data[0].header,
				    	data: data[0].data,
				    	success: data => {
							uni.removeStorageSync("reim_data");
							this.reim_data = data.data.data.list[0];
							this.reim_data.dry_bill_ext.forEach(b => {
								this.bills.push({
									name: b.dry_name,
									extname: b.dry_mime_type,
									url: this.oss_domain + b.dry_object
								})
							})
							this.images.push({
								id: this.reim_data.dry_reim_certify,
								url: this.oss_domain + this.reim_data.dry_reim_certify_ext[0].dry_object
							})
							this.salary.imageList.push(reim_data.dry_reim_certify == 0 ? '' : this.oss_domain + this.reim_data.dry_reim_certify_ext[0].dry_object);
							this.imgNum = this.bills.length;
						}
					})
				}
			},
			audit(type){
				var that = this;
				var token = this.$dry.getToken();
				if(token){
					var data = [];
					data['id'] = this.reim_data.id;
					if(type == 'agree'){
						var num = Number(this.reim_data.dry_audit_step) + 1;
						data['dry_audit_step'] = num;
						data['dry_audit' + num] = this.user.id;
						data['dry_audit_avatar' + num] = this.user.ext_avatar_url;
						data['dry_audit_note' + num] = this.user.ext_nick_name;
						data['dry_audit_time' + num] = this.$dry.getDateTimeData().standard;
					}
					if(type == 'refuse'){
						data['dry_audit_step'] = 0;
						data['dry_audit_submit'] = 0;
					}
					data = this.$request.run("editReimbursement",data,token);
					uni.request({
						url: data[0].url,
						method: data[0].method,
						header: data[0].header,
						data: data[0].data,
						success: data => {
							uni.showToast({
								title: "成功！"
							})
							that.getReimList(this.reim_data.id);
						}
					})
				}
			},
			clickCancel() {
				this.showDialog = false;
			},
			clickConfirm() {
				this.showDialog = false;
				this.submit();
			},
			verify(){
				this.showDialog = true;
				this.isEdit = true;
			},
			upload(){
				this.$oss.upload("getReimbursementUploadData",this.fileList);
				this.fileIds = this.$oss.fileIds;
				this.isClickUpload = this.$oss.isClickUpload;
			},
			submit(){
				var that = this;
				var token = this.$dry.getToken();
				if(token){
					this.upload();
					uni.showToast({
						title: "正在提交",
						icon: "loading",
						duration: 2000
					});
					setTimeout(() => {
						var data = [];
						var formData = [];
						formData.id = this.reim_data.id;
						if(this.isEdit){
							this.salary.dry_reim_certify = this.isClickUpLoad == true ? this.$dry.getImgIds(this.images,this.fileIds,this.delId).join(",") : this.reim_data.dry_reim_certify;
						}
						else{
							this.salary.dry_reim_certify = this.isClickUpLoad == true ? this.fileIds.join(",") : 0;
						}
						formData.dry_reim_certify = this.salary.dry_reim_certify;
						data = this.$request.run("editReimbursement",formData,token);
						uni.request({
							url: data[0].url,
							method: data[0].method,
							header: data[0].header,
							data: data[0].data,
							success: data => {
								uni.showToast({
									title: "成功"
								})
								that.getReimList();
							}
						})
					},2000)
				}
			}
		}
	}
</script>

<style>
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}
	
	.slot-text {
		flex: 1;
		font-size: 14px;
		margin-right: 10px;
	}
	.image {
		width: 200rpx;
		height: 150rpx;
	}
	#img-box {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 50rpx;
	}
</style>
